/* eslint-disable @typescript-eslint/no-unused-expressions */
/*
 * @Author: your name
 * @Date: 2021-04-27 10:12:48
 * @LastEditTime: 2021-06-08 20:08:13
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \umi\src\components\GlobalHeader\AvatarDropdown.tsx
 */
import { Table } from 'antd';
import React from 'react';
import styles from './index.less';
import _ from 'underscore';

export type ProductListTableForModalProps = {
  dataSource: any;
  onPageChange: (pageNo: number) => void;
  handleProduct: (productItem: any) => void;
  changeSelection?: (selectionItem: any) => void;
  pageSize: number;
  pageIndex: number;
  total: number;
  type: string;
  haveSelection?: boolean;
};

class ProductListTableForModal extends React.Component<ProductListTableForModalProps> {
  handleProduct = (productItem: any) => {
    const { handleProduct, type } = this.props;

    // handleProduct &&type==='add'&& handleProduct(productItem);
    if (type === 'add') {
      handleProduct && !productItem.isExists && handleProduct(productItem);
    } else {
      handleProduct && handleProduct(productItem);
    }
  };

  pageTurn = (page: number) => {
    const { onPageChange } = this.props;
    onPageChange && onPageChange(page);
  };

  render(): React.ReactNode {
    const {
      pageSize,
      pageIndex,
      total,
      dataSource,
      type,
      haveSelection,
      changeSelection,
    } = this.props;

    const rowSelection = {
      hideSelectAll: true,
      onChange: (selectedRowKeys: any, selectedRows: any) => {
        // eslint-disable-next-line no-console
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedR: ', selectedRows);
        changeSelection && changeSelection(selectedRows);
      },
      getCheckboxProps: (record: any) => ({
        disabled: record.isExists,
      }),
    };
    let columns = [
      {
        title: '产品ID',
        dataIndex: 'productId',
        key: 'productId',
        width: 144,
      },
      {
        title: '产品名称',
        dataIndex: 'productName',
        key: 'productName',
      },
      {
        title: '操作',
        width: 144,
        render: (record: any) => {
          return (
            <div
              onClick={() => {
                this.handleProduct(record);
              }}
              className={
                type === 'add' && record.isExists ? styles.disableLites : styles.toolsLites
              }
            >
              添加
            </div>
          );
        },
      },
    ];

    if (haveSelection) {
      columns = _.initial(columns);
    }

    return (
      <div className={styles.TableWarps}>
        {haveSelection ? (
          <Table
            columns={columns}
            dataSource={dataSource}
            rowSelection={{ ...rowSelection }}
            pagination={{
              total,
              pageSize,
              current: pageIndex,
              showSizeChanger: false,
              onChange: this.pageTurn,
            }}
          />
        ) : (
          <Table
            columns={columns}
            dataSource={dataSource}
            pagination={{
              total,
              pageSize,
              current: pageIndex,
              showSizeChanger: false,
              onChange: this.pageTurn,
            }}
          />
        )}
      </div>
    );
  }
}

export default ProductListTableForModal;
